.home .ceremony {
    .ceremonyTab {
        display: flex;
        width: 85%;
        justify-content: space-between;
        margin: -100px auto 0;
        position: relative;

        li {
            width: 163px;
            height: 147px;
            background: url(../img/ceremony/tab1_n.png)top center no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            user-select: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            &.active {
                background: url(../img/ceremony/tab1.png)top center no-repeat;
                background-size: 100% 100%;
            }

            &.tabItem0.active {
                background: url(../img/ceremony/tab0.png)top center no-repeat;
                background-size: 100% 100%;
            }

            &.tabItem0,
            &.active1 {
                background: url(../img/ceremony/tab0_n.png)top center no-repeat;
                background-size: 100% 100%;

                p {
                    top: -11px !important;
                }
            }

            p {
                position: relative;

                &:first-child {
                    top: -22px;
                    font-size: 22px;
                    font-weight: 600;
                    color: #FEFEFF;
                }

                &:nth-child(2) {
                    font-size: 16px;
                    font-family: PingFangSC;
                    font-weight: 500;
                    color: #FFFFFF;
                    top: -8px;
                }
            }
        }
    }

    .fixTab {
        position: absolute;
        width: 175px;
        height: 172px;
        background: url(../img/ceremony/fixTab.png)top center no-repeat;
        background-size: 100% 100%;
        top: 440px;
        right: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        p {
            width: 174px;
            height: 50px;
            cursor: pointer;
            user-select: none;
            border-radius: 19px;
            background: url(../img/ceremony/fixAward.png)top center no-repeat;
            background-size: 100% 100%;

            &:first-child {
                margin-top: 15px;
                background: url(../img/ceremony/fixRule.png)top center no-repeat;
                background-size: 100% 100%;

                &.active {
                    margin-top: -34px;
                }
            }
        }

        &.fixActive {
            background: url(../img/ceremony/fixTab_n.png)top center no-repeat;
            background-size: 100% 100%;

            p {
                position: relative;
                z-index: 2;

                &::before {
                    position: absolute;
                    content: '';
                    width: 175px;
                    height: 28px;
                    background: url(../img/ceremony/fixBefore.png)top center no-repeat;
                    background-size: 100% 100%;
                    top: 49px;
                    left: 0;
                }
            }
        }
    }

    // 规则奖励弹窗
    .toast_box_box {

        .toast_box {
            .toast {
                .close {
                    background: url(../img/ceremony/close.png)center center no-repeat;
                    background-size: 15px 15px;
                    right: 10px;
                    top: 50px;
                }
            }
        }

        // 我的奖励
        .myAward {
            width: 604px;
            height: 404px;
            background: url(../img/ceremony/myAward.png)top center no-repeat;
            background-size: 100% 100%;

            .toast {
                .info {
                    width: 342px;
                    height: 30px;
                    background: #FF6A67;
                    border-radius: 15px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 90px auto 0;

                    p {
                        flex: 1;
                        text-align: center;
                        font-size: 16px;
                        color: #FFFFFF;
                    }
                }

                .awardListBox {
                    width: 540px;
                    height: 240px;
                    background: rgba(255, 255, 255, 0.5);
                    border-radius: 20px;
                    margin: 20px auto 0;
                    overflow: hidden;

                    div {
                        width: 510px;
                        display: flex;
                        margin: 10px auto 5px;

                        p {
                            flex: 1;
                            text-align: center;
                            font-size: 14px;
                            color: #676767;
                            line-height: 22px;
                        }
                    }

                    .awardList {
                        margin: 0px auto 0;
                        overflow-y: auto;
                        position: relative;
                        max-height: 188px;
                        width: 510px;

                        li {
                            width: 100%;
                            background: #EBE1F3;
                            display: flex;
                            margin: 0px auto 5px;

                            p {
                                flex: 1;
                                text-align: center;
                                font-size: 14px;
                                color: #676767;
                                line-height: 22px;
                                &:nth-child(3){
                                    flex: 1.1;
                                }
                            }
                        }

                        .empty-data {
                            margin: 80px auto 0;
                            justify-content: center;
                        }
                    }
                }

            }
        }

        // 赛段一规则
        .leg1 {
            width: 604px;
            height: 404px;
            background: url(../img/ceremony/leg1/rule.png)top center no-repeat;
            background-size: 100% 100%;

            .toast {
                .ruleBox {
                    width: 100%;
                    margin: 100px auto 0;
                    height: 270px;
                    overflow-y: auto;
                    overflow-x: hidden;

                    div {
                        width: 540px;
                        padding: 10px 0;
                        background: rgba(255, 255, 255, 0.5);
                        border-radius: 20px;
                        display: flex;
                        flex-direction: column;
                        margin: 10px auto 0;

                        p {
                            flex-shrink: 0;
                            font-size: 14px;
                            color: #676767;
                            line-height: 22px;
                            margin: 10px 0 0 30px;
                            width: 90%;

                            &:first-child {
                                width: 120px;
                                height: 32px;
                                background: #B972F1;
                                border-radius: 16px;
                                font-size: 16px;
                                text-align: center;
                                font-weight: 600;
                                color: #FFFFFF;
                                line-height: 32px;
                                margin-left: 10px;
                            }

                            i {
                                color: #FF6262;
                            }
                        }

                        &:nth-child(1) {
                            flex-direction: row;

                            p {
                                line-height: 32px;
                                margin-top: 0;
                            }
                        }

                        .ruleList {
                            li {
                                width: 495px;
                                height: 32px;
                                background: #E3E9F3;
                                border-radius: 10px;
                                display: flex;
                                align-items: center;
                                margin: 5px auto 0;
                                font-size: 14px;

                                color: #676767;

                                span {
                                    width: 0;
                                    height: 0;
                                    border: 10px solid;
                                    border-color: transparent transparent transparent #B972F1;
                                }
                            }
                        }
                    }
                }
            }
        }

        .leg3,.leg4 {
            .toast .ruleBox {
                .cycleBox {
                    width: 495px;
                    height: 210px;
                    background: #E3E9F3;
                    border-radius: 10px;
                    padding: 0;

                    p {
                        margin-top: 0;
                        margin-bottom: 5px;
                    }

                    .cycleTitle {
                        background: none;
                        width: 100%;
                        font-size: 18px;
                        font-family: eryaxindahei;
                        font-weight: 600;
                        color: #B972F1;
                        display: flex;
                        align-items: center;
                        margin: 0;

                        span {
                            width: 0;
                            height: 0;
                            border: 10px solid;
                            border-color: transparent transparent transparent #B972F1;
                        }
                    }

                    .cycleList {
                        li {
                            width: 450px;
                            padding-left: 10px;
                            height: 30px;
                            background: #A68AF6;
                            border-radius: 6px;
                            font-size: 14px;
                            line-height: 30px;
                            color: #FFFFFF;
                            margin: 5px auto 0;
                        }
                    }
                }
            }

        }
        .leg3{
            .toast{
                .ruleBox{
                    .cycleBox{
                        height: auto;
                        .table{
                            width: 460px;
                            margin-bottom: 10px;
                            background-color: #F5F9FE;
                            overflow: hidden;
                            font-size: 14px;
                            .til,.item{
                                width: 440px;
                                display: flex;
                                flex-direction: row;
                                justify-content: space-around;
                                color: #6b6b6b;
                                background: none;
                                line-height: 30px;
                                padding: 0;
                                span{
                                    width: 33%;
                                    text-align: center;
                                }
                            }
                            .item{
                                border-top: 1px solid #E2E9F3;
                            }
                        }
                    }
                }
            }
        }
    }

    .leg0 {
        .giftBox {
            width: 744px;
            height: 373px;
            background: url(../img/ceremony/leg0/gift.png)top center no-repeat;
            background-size: 100% 100%;
            margin: 60px auto 0;
            display: flex;
            flex-direction: column;
            align-items: center;

            .intro {
                width: 100%;
                font-size: 14px;
                text-align: center;
                color: #601CA2;
                margin-top: 90px;
            }

            .gifts {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 20px;

                .giftItem {
                    width: 330px;
                    height: 200px;
                    background: rgba(255, 255, 255, 0.5);
                    border-radius: 20px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin: 0 5px;

                    .giftTop {
                        width: 310px;
                        height: 120px;
                        background: #E3E9F3;
                        border-radius: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-top: 10px;

                        div {
                            width: 93px;
                            height: 100px;
                            background: url(../img/welfare/giftBg.png)top center no-repeat;
                            background-size: 100% 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-shrink: 0;

                            img {
                                width: 80%;
                                height: 80%;
                            }
                        }

                        p {
                            display: flex;
                            flex-direction: column;
                            margin-left: 10px;

                            span {
                                font-size: 14px;
                                color: #570D9C;
                                line-height: 22px;

                                &:first-child {
                                    font-size: 18px;
                                    font-weight: 600;
                                    color: #570D9C;
                                }
                            }
                        }
                    }

                    .giftBottom {
                        font-size: 16px;
                        color: #6B6B6B;
                        line-height: 22px;
                        display: flex;
                        align-items: center;
                        margin-top: 20px;

                        span {
                            font-size: 20px;
                            margin-left: 5px;
                            font-weight: 600;
                            font-style: italic;
                            color: #FF6969;
                        }
                    }
                }
            }
        }

        .pkBox {
            width: 744px;
            height: 1103px;
            background: url(../img/ceremony/leg0/pk.png)top center no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px auto 0;

            .pkTop {
                display: flex;
                margin-top: 110px;

                .pkTopItem {
                    width: 260px;
                    height: 300px;
                    background: rgba(255, 255, 255, 0.5);
                    border-radius: 20px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    

                    div:first-child {
                        width: 240px;
                        height: 200px;
                        background: #E3E9F3;
                        border-radius: 10px;
                        margin-top: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                    }

                    div:nth-child(2) {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        p {
                            margin-top: 10px;
                        }

                        p:first-child {
                            font-size: 18px;
                            font-weight: 600;
                            color: #570D9C;
                            display: flex;
                            align-items: center;

                            span {
                                width: 20px;
                                height: 20px;
                                background: #C573F3;
                                border-radius: 50%;
                                font-size: 18px;
                                text-align: center;
                                line-height: 20px;
                                color: #FFF;
                                margin: 0 3px;
                            }
                        }

                        p:nth-child(2) {
                            font-size: 16px;
                            color: #6B6B6B;
                        }
                    }
                }

                .pkTopItem2 {
                    width: 390px;
                    margin-left: 10px;

                    div:first-child {
                        width: 370px;
                    }
                }
            }

            .pkTop2 {
                margin-top: 15px;

                .pkTopItem {
                    width: 660px;
                    height: 220px;
                    flex-direction: row;

                    div:first-child {
                        margin-top: 0px;
                        margin-left: 10px;
                    }

                    div:nth-child(2) {
                        margin-left: 50px;
                    }
                }
            }

            .playIntro {
                width: 660px;
                height: 400px;
                background: rgba(255, 255, 255, 0.5);
                border-radius: 20px;
                position: relative;
                margin-top: 20px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .title {
                    width: 150px;
                    height: 28px;
                    background: #EF6CF8;
                    border-radius: 0px 0px 18px 18px;
                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translate(-50%, 0);
                    font-size: 18px;
                    text-align: center;
                    font-weight: 600;
                    color: #F5F3FF;
                    line-height: 28px;
                }

                .introItem {
                    width: 90%;
                    margin: 0 auto;
                    font-size: 16px;
                    color: #6B6B6B;
                    line-height: 30px;
                    display: flex;

                    span {
                        width: 16px;
                        height: 16px;
                        background: #C573F3;
                        border-radius: 50%;
                        line-height: 16px;
                        font-size: 14px;
                        font-weight: 600;
                        color: #FFFFFF;
                        flex-shrink: 0;
                        text-align: center;
                        margin: 8px 10px 0 0;
                    }
                }
            }
        }

        .pkTips {
            width: 744px;
            height: 284px;
            background: url(../img/ceremony/leg0/tip.png)top center no-repeat;
            background-size: 100% 100%;

            .playIntro {
                height: 200px;
                margin-top: 40px;
            }
        }
    }

    .leg1 {
        .topRule {
            width: 744px;
            height: 124px;
            background: url(../img/ceremony/leg1/leg1Top.png)top center no-repeat;
            background-size: 100% 100%;
            margin: 60px auto 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            p {
                width: 440px;
                height: 30px;
                background: rgba(255, 255, 255, 0.5);
                border-radius: 15px;
                text-align: center;
                line-height: 30px;

                &:first-child {
                    font-size: 16px;
                    color: #B059F7;

                    span {
                        font-size: 16px;
                        font-weight: bold;
                        display: inline-block;
                        margin-right: 10px;
                    }
                }

                &:nth-child(2) {
                    font-size: 16px;
                    color: #6B6B6B;
                    margin-top: 10px;
                }
            }
        }

        .bottomList {
            width: 744px;
            height: 903px;
            padding-top: 1px;
            background: url(../img/ceremony/leg1/rank.png)top center no-repeat;
            background-size: 100% 100%;
            margin: 100px auto 0;
            position: relative;

            .infoBox {
                width: 624px;
                height: 124px;
                background: url(../img/ceremony/leg1/info.png)top center no-repeat;
                background-size: 100% 100%;
                position: absolute;
                left: 50%;
                top: -60px;
                transform: translate(-50%, 0);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .info {
                    display: flex;
                    width: 60%;

                    p {
                        flex: 1;
                        font-size: 18px;
                        color: #6B6B6B;
                        text-align: center;

                        &:first-child {
                            font-size: 18px;
                            font-family: eryaxindahei;
                            font-weight: bold;
                            color: #B059F7;
                        }
                    }
                }

                .progressBox {
                    display: flex;
                    align-items: center;
                    margin-top: 15px;

                    .success {
                        font-size: 24px;
                        font-family: PingFangSC;
                        font-weight: 600;
                        color: #ff6969;
                        font-style: italic;
                    }

                    p {
                        &:first-child {
                            font-size: 14px;
                            font-family: PingFangSC;
                            font-weight: 400;
                            color: #6B6B6B;
                            margin-right: 10px;
                        }

                        &:nth-child(2) {
                            width: 300px;
                            height: 30px;
                            background: rgba(255, 255, 255, 0.5);
                            border-radius: 15px;
                            position: relative;
                            overflow: hidden;

                            span:first-child {
                                position: absolute;
                                top: 0;
                                left: 0;
                                height: 100%;
                                // width: 100%;
                                background: #B059F7;
                            }

                            span:nth-child(2) {
                                width: 70px;
                                height: 16px;
                                background: rgba(0, 0, 0, 0.3);
                                border-radius: 8px;
                                position: absolute;
                                right: 5px;
                                top: 50%;
                                transform: translate(0, -50%);
                                z-index: 2;
                                line-height: 16px;
                                text-align: center;
                                font-size: 14px;
                                color: #FFFFFF;
                            }
                        }
                    }
                }
            }

            .listBox {
                width: 694px;
                height: 764px;
                background: url(../img/ceremony/leg1/rank2.png)top center no-repeat;
                background-size: 100% 100%;
                margin: 90px auto 0;
                display: flex;
                align-items: center;
                flex-direction: column;
                position: relative;

                .page-more {
                    position: absolute;
                    bottom: 50px;
                    left: 50%;
                    transform: translate(-50%, 0);
                }
            }
        }
    }

    .rankList {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 674px;
        max-height: 560px;
        margin-top: 117px;

        .empty-data {
            margin: 280px auto;
        }

        li {
            width: 224px;
            height: 104px;
            background: url(../img/ceremony/leg1/item.png)top center no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 35px;
            position: relative;

            .headImg {
                width: 62px;
                height: 62px;
                background: #F1D8C4;
                border: 3px solid #FAF4FF;
                border-radius: 50%;
            }

            .online {
                width: 17px;
                height: 17px;
                position: absolute;
                top: 67px;
                left: 82px;
            }

            p {
                display: flex;
                flex-direction: column;
                width: 80px;
                margin-left: 5px;

                span {
                    width: 100%;
                    text-align: center;
                    font-size: 16px;
                    color: #FFFFFF;

                    &:first-child {
                        font-size: 18px;
                        font-weight: bold;
                        margin-bottom: 5px;
                    }
                }
            }

            i {
                display: block;
                min-width: 22px;
                padding: 0 2px;
                height: 24px;
                background: linear-gradient(0deg, #FEF4BA, #FFFCCE);
                border-radius: 14px 0px 14px 0px;
                position: absolute;
                top: 0;
                left: 11px;
                font-size: 16px;
                text-align: center;
                line-height: 24px;
                color: #FF8004;
            }
        }
    }

    .leg2 {
        .tab {
            width: 740px;
            height: 100px;
            background: #A194F8;
            border-radius: 20px;
            margin: 40px auto 0;
            display: flex;
            justify-content: center;
            align-items: center;

            li {
                width: 180px;
                height: 72px;
                background: url(../img/ceremony/leg2/tab.png)top center no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
                user-select: none;
                font-size: 30px;
                text-align: center;
                font-weight: 600;
                color: #F5F4FF;
                line-height: 72px;

                &:nth-child(2),
                &:nth-child(3) {
                    background: url(../img/ceremony/leg2/tab1.png)top center no-repeat;
                    background-size: 100% 100%;
                }

                &.active {
                    background: url(../img/ceremony/leg2/tab_a.png)top center no-repeat;
                    background-size: 100% 100%;
                    color: #FFFEB0;
                }

                &:nth-child(2),
                &:nth-child(3) {
                    &.active {
                        background: url(../img/ceremony/leg2/tab1_a.png)top center no-repeat;
                        background-size: 100% 100%;
                        color: #FFFEB0;
                    }
                }

            }
        }

        .content {
            width: 740px;
            padding-bottom: 40px;
            background: url(../img/ceremony/leg1/rank.png)top center no-repeat;
            background-size: 100% 100%;
            margin: 30px auto 0;
            overflow: hidden;

            .rule {
                width: 670px;
                height: 110px;
                background: rgba(255, 255, 255, 0.5);
                border-radius: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                text-align: center;
                margin: 40px auto 0;

                p {
                    font-size: 16px;
                    color: #6B6B6B;
                    line-height: 22px;

                    &:first-child {
                        width: 100%;
                    }

                    &:nth-child(2) {
                        width: 520px;
                        height: 30px;
                        background: #E3E9F3;
                        border-radius: 15px;
                        margin-top: 15px;
                        line-height: 30px;

                        span {
                            font-size: 20px;
                            display: inline-block;
                            font-weight: 600;
                            font-style: italic;
                            color: #FF6969;
                            margin: 0 10px;
                            line-height: 30px;
                        }
                    }
                }
            }

            .rankBox_box {
                width: 670px;
                padding: 2px 0;
                margin: 60px auto 0;
                border-radius: 20px;
                background: linear-gradient(0deg, #EFBF63, #FBEFC6);
                display: flex;
                align-items: center;
                justify-content: center;

                .rankBox {
                    width: 666px;
                    // height: 696px;
                    background: #f5f3ff;
                    border-radius: 20px;

                    .rankScore {
                        position: relative;

                        .goTop {
                            width: 20px;
                            height: 20px;
                            background: url(../img/goTop.png)center center no-repeat;
                            background-size: 16px 10px;
                            top: 20px;
                            right: -7px;
                            position: absolute;
                            cursor: pointer;
                        }

                        .rankTh {
                            width: 600px;
                            display: flex;
                            margin: 20px auto 0;

                            p {
                                flex: 1;
                                text-align: center;
                                font-size: 14px;
                                color: #6B6B6B;
                                line-height: 26px;
                            }

                            p:nth-child(4) {
                                flex: none;
                                width: 200px;
                            }
                        }

                        .rank {
                            height: 420px;
                            overflow-y: auto;

                            .empty-data {
                                margin: 170px auto;
                            }

                            .rankTh {
                                background: #E3E9F3;
                                border-radius: 13px;

                                p {
                                    font-size: 16px;

                                    &:first-child {
                                        font-size: 20px;
                                        font-weight: 600;
                                        color: #000000;
                                    }

                                    &:nth-child(4) {
                                        background: #BF72FD;
                                        border-radius: 13px;
                                        color: #FFFFFF;
                                    }
                                }

                                &.active {
                                    background: #E0E0E0;

                                    p:nth-child(4) {
                                        background: #949494;
                                    }
                                }
                            }

                            .cutLine {
                                font-size: 18px;
                                font-family: PangMenZhengDao;
                                font-weight: 600;
                                color: #686868;
                                width: 100%;
                                text-align: center;
                                margin: 20px 0 20px;
                                position: relative;

                                &::before,
                                &::after {
                                    width: 200px;
                                    height: 1px;
                                    background: #E0E0E0;
                                    position: absolute;
                                    top: 12px;
                                    left: 40px;
                                    content: '';
                                }

                                &::after {
                                    left: unset;
                                    right: 40px;
                                }
                            }
                        }

                        .myScore {
                            width: 740px;
                            height: 120px;
                            background: #FAD97D;
                            margin-top: 20px;
                            position: relative;
                            left: -37px;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            div:first-child {
                                font-size: 22px;
                                font-family: eryaxindahei;
                                font-weight: 600;
                                color: #E8A03A;
                                text-align: center;
                            }

                            div:nth-child(2) {
                                width: 0;
                                height: 0;
                                border: 13px solid;
                                border-color: transparent transparent transparent #EFB056;
                                margin-left: 10px;
                            }

                            div:nth-child(3) {
                                display: flex;
                                align-items: center;
                                width: 520px;
                                height: 80px;
                                background: #EFB056;
                                box-shadow: 0px 0px 6px 0px rgba(239, 176, 86, 0.6);
                                border-radius: 6px;

                                p {
                                    flex: 1;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: space-between;
                                    align-items: center;
                                    height: 80%;
                                    border-left: 1px solid #FFE8A6;

                                    &:first-child {
                                        border: none;

                                        span:nth-child(2) {
                                            font-size: 30px;
                                            font-family: PangMenZhengDao;
                                            font-weight: 600;
                                            color: #FFFFFF;
                                        }
                                    }

                                    span {
                                        color: #FFFFFF;
                                        font-size: 14px;
                                        width: 90%;
                                        text-align: center;

                                        &:nth-child(2) {
                                            font-size: 16px;
                                            line-height: 40px;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .rankAward {
                        .awardRule {
                            margin: 40px auto 0;
                            font-size: 14px;
                            text-align: center;
                            width: 100%;
                            color: #6B6B6B;
                        }

                        .awardImg {
                            width: 600px;
                            height: 134px;
                            background: url(../img/ceremony/leg2/award.png)top center no-repeat;
                            background-size: 100% 100%;
                            margin: 20px auto;
                            display: flex;
                            align-items: center;
                            justify-content: space-around;

                            div {

                                &:first-child,
                                &:nth-child(3) {
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;

                                    p {
                                        &:first-child {
                                            width: 88px;
                                            height: 88px;
                                            background: url(../img/list/user/giftBg.png)top center no-repeat;
                                            background-size: 100% 100%;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;

                                            img {
                                                width: 80%;
                                                height: 80%;
                                            }
                                        }

                                        &:nth-child(2) {
                                            font-size: 14px;
                                            margin-top: 10px;
                                            color: #6C6C6C;

                                            span {
                                                color: #FF6969;
                                            }
                                        }
                                    }
                                }

                                &:nth-child(2) {
                                    width: 53px;
                                    height: 78px;
                                    background: url(../img/ceremony/leg2/awardTxt.png)top center no-repeat;
                                    background-size: 100% 100%;
                                    font-size: 14px;
                                    text-align: center;
                                    color: #0D0D0D;
                                    line-height: 78px;
                                    margin-left: -70px;
                                }
                            }
                        }

                        .awardInfo {
                            width: 600px;
                            height: 80px;
                            background: #E3E9F3;
                            border-radius: 12px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            margin: 0 auto 40px;

                            li {
                                margin: 0 auto;
                                width: 95%;
                                display: flex;
                                height: 35px;

                                p {
                                    flex: 1;
                                    text-align: center;
                                    font-size: 16px;
                                    color: #6B6B6B;
                                    line-height: 35px;
                                }

                                &:first-child {
                                    border-bottom: 1px solid #F5F3FF;

                                    p {
                                        font-size: 14px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .leg3{
        .tab {
            position: relative;
            width: 740px;
            height: 100px;
            background: #A194F8;
            border-radius: 20px;
            margin: 40px auto 0;
            // overflow: scroll;
            .pre{
                position: absolute;
                top: 30px;
                left: -40px;
                width: 27px;
                height: 34px;
                background: url(../img/ceremony/leg3/pre.png)top center no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
                &:active{
                    background: url(../img/ceremony/leg3/pre-h.png)top center no-repeat;
                    background-size: 100% 100%;
                }
            }
            .next{
                position: absolute;
                top: 30px;
                right: -40px;
                width: 27px;
                height: 34px;
                background: url(../img/ceremony/leg3/next.png)top center no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
                &:active{
                    background: url(../img/ceremony/leg3/next-h.png)top center no-repeat;
                    background-size: 100% 100%;
                }
            }
            .tabWrap{
                width: 740px;
                height: 100px;
                overflow-x: scroll;
                overflow-y: hidden;
                .list{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 1080px;
                    height: 100px;
                }
            }
            li {
                width: 180px;
                height: 72px;
                background: url(../img/ceremony/leg2/tab.png)top center no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
                user-select: none;
                font-size: 30px;
                text-align: center;
                font-weight: 600;
                color: #F5F4FF;
                line-height: 72px;

                &:nth-child(2),
                &:nth-child(3) {
                    background: url(../img/ceremony/leg2/tab1.png)top center no-repeat;
                    background-size: 100% 100%;
                }

                &.active {
                    background: url(../img/ceremony/leg2/tab_a.png)top center no-repeat;
                    background-size: 100% 100%;
                    color: #FFFEB0;
                }

                &:nth-child(2),
                &:nth-child(3) {
                    &.active {
                        background: url(../img/ceremony/leg2/tab1_a.png)top center no-repeat;
                        background-size: 100% 100%;
                        color: #FFFEB0;
                    }
                }

            }
        }
        .content {
            width: 740px;
            min-height: 750px;
            padding-bottom: 15px;
            background: url(../img/ceremony/leg1/rank.png)top center no-repeat;
            background-size: 100% 100%;
            margin: 30px auto 0;
            overflow: hidden;

            .rule {
                width: 670px;
                height: 110px;
                background: rgba(255, 255, 255, 0.5);
                border-radius: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                text-align: center;
                margin: 40px auto 0;

                p {
                    width: 85%;
                    text-align: left;
                    font-size: 16px;
                    color: #6B6B6B;
                    line-height: 22px;
                    span {
                        color: #FF6969;
                    }

                }
            }

            .rankBox_box {
                width: 670px;
                min-height: 456px;
                margin: 60px auto 0;
                border-radius: 20px;
                background: linear-gradient(0deg, #EFBF63, #FBEFC6);
                display: flex;
                align-items: center;
                justify-content: center;

                .rankBox {
                    width: 666px;
                    min-height: 456px;
                    background: #f5f3ff;
                    border-radius: 20px;

                    .rankTab {
                        width: 90%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        position: relative;
                        margin: -28px auto 40px;

                        p {
                            width: 368px;
                            height: 22px;
                            background: url(../img/ceremony/leg2/border.png)top center no-repeat;
                            background-size: 100% 100%;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                        }

                        li {
                            width: 220px;
                            height: 56px;
                            background: url(../img/ceremony/leg2/tab2_a.png)top center no-repeat;
                            background-size: 100% 100%;
                            cursor: pointer;
                            user-select: none;
                            position: relative;
                            z-index: 2;
                            font-size: 22px;
                            text-align: center;
                            font-weight: 600;
                            color: #F5F4FD;
                            line-height: 56px;

                            &.active {
                                background: url(../img/ceremony/leg2/tab2.png)top center no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                    }
                    .winRank{
                        position: relative;
                        width: 600px;
                        // height: 627px;
                        margin: 0 auto;
                        .til{
                            display: flex;
                            justify-content: space-around;
                            font-size: 14px;
                            color: #6b6b6b;
                            text-align: center;
                            .rankNum{
                                width: 20%;
                            }
                            .nick{
                                width: 25%;
                            }
                            .uid{
                                width: 20%;
                            }
                            .wins{
                                width: 35%;
                            }
                        }
                        .list{
                            // margin-top: 10px;
                            height: 500px;
                            padding-right: 10px;
                            padding-bottom: 15px;
                            overflow-y: scroll;
                            overflow-x: hidden;
                            .item{
                                .itemWrap{
                                    display: flex;
                                    justify-content: space-around;
                                    height: 26px;
                                    margin-top: 22px;
                                    background-color: #E2E9F3;
                                    border-radius: 13px;
                                    line-height: 26px;
                                    font-size: 16px;
                                    color: #6b6b6b;
                                    text-align: center;
                                    .rankNum{
                                        width: 20%;
                                        color: #000;
                                    }
                                    .nick{
                                        width: 25%;
                                    }
                                    .uid{
                                        width: 20%;
                                    }
                                    .wins{
                                        width: 35%;
                                        background-color: #C86DFF;
                                        border-radius: 13px;
                                        color: #fff;
                                    }
                                    &.grey{
                                        background-color: #E0E0E0;
                                        .wins{
                                            background-color: #949494;
                                        }
                                    }
                                }
                                .devideLine{
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-around;
                                    width: 600px;
                                    margin-top: 22px;
                                    font-size: 18px;
                                    color: #686868;
                                    span{
                                        width: 200px;
                                        height: 1px;
                                        background-color: #E0E0E0;
                                        vertical-align: middle;
                                    }
                                }
                            }
                        }
                        .goTop{
                            width: 20px;
                            height: 20px;
                            background: url(../img/goTop.png) center center no-repeat;
                            background-size: 16px 10px;
                            top: 10px;
                            right: -7px;
                            position: absolute;
                            cursor: pointer;
                        }
                        .myRank{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 740px;
                            height: 120px;
                            margin-left: -70px;
                            background-color: #FED772;
                            .til{
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                span{
                                    font-size: 22px;
                                    color: #e8a03a;
                                }
                                i{
                                    height: 0;
                                    margin: 0 10px;
                                    border-width: 11px;
                                    border-color: transparent transparent transparent #F6AC48;
                                    border-style: solid;
                                }
                            }
                            .myInfo{
                                width: 520px;
                                height: 80px;
                                background: #F6AC48;
                                border-radius: 5px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                >div{
                                    width: 23%;
                                    border-right: 1px solid #fff;
                                    &:last-child{
                                        border: none;
                                    }
                                    .til{
                                        font-size: 14px;
                                        color: #fff;
                                        line-height: 40px;
                                    }
                                    .val{
                                        font-size: 16px;
                                        text-align: center;
                                    }
                                }
                                .rank{
                                    .val{
                                        font-size: 30px;
                                        line-height: 20px;
                                    }
                                }
                            }
                        }
                    }
                    .rankAward {
                        .awardRule {
                            margin: 40px auto 0;
                            font-size: 14px;
                            text-align: center;
                            width: 100%;
                            color: #6B6B6B;
                        }

                        .awardImg {
                            width: 600px;
                            height: 134px;
                            background: url(../img/ceremony/leg2/award.png)top center no-repeat;
                            background-size: 100% 100%;
                            margin: 20px auto;
                            display: flex;
                            align-items: center;
                            justify-content: space-around;

                            div {

                                &:first-child,
                                &:nth-child(3) {
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;

                                    p {
                                        &:first-child {
                                            width: 88px;
                                            height: 88px;
                                            background: url(../img/list/user/giftBg.png)top center no-repeat;
                                            background-size: 100% 100%;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;

                                            img {
                                                width: 60%;
                                                height: 60%;
                                            }
                                        }

                                        &.pkWins{
                                            width: 107px;
                                            height: 107px;
                                            background: url(../img/ceremony/leg3/PK.png)top center no-repeat;
                                            background-size: 100% 100%; 
                                        }

                                        &:nth-child(2) {
                                            font-size: 14px;
                                            margin-top: 10px;
                                            color: #6C6C6C;

                                            span {
                                                color: #FF6969;
                                            }
                                        }

                                        &.pkTips{
                                            margin-top: -5px;
                                        }
                                    }
                                }

                                &:nth-child(2) {
                                    width: 53px;
                                    height: 78px;
                                    background: url(../img/ceremony/leg2/awardTxt.png)top center no-repeat;
                                    background-size: 100% 100%;
                                    font-size: 14px;
                                    text-align: center;
                                    color: #0D0D0D;
                                    line-height: 78px;
                                    margin-left: -70px;
                                }
                            }
                        }

                        .awardInfo {
                            width: 600px;
                            height: 80px;
                            background: #E3E9F3;
                            border-radius: 12px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            margin: 0 auto 40px;

                            li {
                                margin: 0 auto;
                                width: 95%;
                                display: flex;
                                height: 35px;

                                p {
                                    flex: 1;
                                    text-align: center;
                                    font-size: 16px;
                                    color: #6B6B6B;
                                    line-height: 35px;
                                }

                                &:first-child {
                                    border-bottom: 1px solid #F5F3FF;

                                    p {
                                        font-size: 14px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .content2 {
            width: 740px;
            min-height: 450px;
            padding-bottom: 20px;
            background: url(../img/ceremony/leg1/rank.png)top center no-repeat;
            background-size: 100% 100%;
            margin: 30px auto 0;
            overflow: hidden;
            .goTop{
                width: 20px;
                height: 20px;
                background: url(../img/goTop.png) center center no-repeat;
                background-size: 16px 10px;
                top: 10px;
                right: -7px;
                position: absolute;
                cursor: pointer;
            }
            .tab1{
                display: flex;
                justify-content: center;
                align-items: center;
                .item{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    width: 65px;
                    height: 93px;
                    margin: 0 13px;
                    padding: 0 25px 20px;
                    line-height: 30px;
                    font-size: 30px;
                    font-weight: bold;
                    background: url(../img/ceremony/leg3/tab1.png) top center no-repeat;
                    cursor: pointer;
                    &.cur{
                        color: #e5722c;
                        background: url(../img/ceremony/leg3/tab1-h.png) top center no-repeat;
                    }
                    &.short{
                        span{
                            line-height: 15px;
                            font-size: 15px;
                        }
                    }
                }
            }
            .fenzu{
                position: relative;
                width: 670px;
                padding: 2px 0;
                margin: 60px auto 0;
                border-radius: 20px;
                background: linear-gradient(0deg, #EFBF63, #FBEFC6);
                display: flex;
                align-items: center;
                justify-content: center;
                .fenzu_box{
                    width: 666px;
                    padding-bottom: 20px;
                    min-height: 500px;
                    background: #f5f3ff;
                    border-radius: 20px;
                    .rankTab {
                        width: 90%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        position: relative;
                        margin: -28px auto 40px;

                        p {
                            width: 368px;
                            height: 22px;
                            background: url(../img/ceremony/leg2/border.png)top center no-repeat;
                            background-size: 100% 100%;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                        }

                        li {
                            width: 220px;
                            height: 56px;
                            background: url(../img/ceremony/leg2/tab2_a.png)top center no-repeat;
                            background-size: 100% 100%;
                            cursor: pointer;
                            user-select: none;
                            position: relative;
                            z-index: 2;
                            font-size: 22px;
                            text-align: center;
                            font-weight: 600;
                            color: #F5F4FD;
                            line-height: 56px;

                            &.active {
                                background: url(../img/ceremony/leg2/tab2.png)top center no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                    }
                    .rankList {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        width: 674px;
                        max-height: 980px;
                        overflow-y: scroll;
                        overflow-x: hidden;
                        padding-bottom: 15px;
                        margin-top: 40px;
    
                        .empty-data {
                            margin: 280px auto;
                        }
    
                        li {
                            width: 184px;
                            height: 164px;
                            background: url(../img/ceremony/leg3/itemBg.png)top center no-repeat;
                            background-size: 100% 100%;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            margin: 0 18px 8px;
                            position: relative;
                            &.grey{
                                background: url(../img/ceremony/leg3/itemBg2.png)top center no-repeat;
                                background-size: 100% 100%;
                            }
                            .headImg {
                                width: 62px;
                                height: 62px;
                                background: #F1D8C4;
                                border: 3px solid #FAF4FF;
                                border-radius: 50%;
                            }
    
                            .online {
                                width: 17px;
                                height: 17px;
                                position: absolute;
                                top: 67px;
                                left: 110px;
                            }
    
                            p {
                                display: flex;
                                flex-direction: column;
                                width: 80px;
                                margin-left: 5px;
    
                                span {
                                    width: 100%;
                                    text-align: center;
                                    font-size: 16px;
                                    color: #FFFFFF;
    
                                    &:first-child {
                                        font-size: 18px;
                                        font-weight: bold;
                                        margin-bottom: 5px;
                                    }
                                }
                            }
    
                            i {
                                display: block;
                                min-width: 22px;
                                padding: 0 2px;
                                height: 24px;
                                background: linear-gradient(0deg, #FEF4BA, #FFFCCE);
                                border-radius: 14px 0px 14px 0px;
                                position: absolute;
                                top: 0;
                                left: 11px;
                                font-size: 16px;
                                text-align: center;
                                line-height: 24px;
                                color: #FF8004;
                            }
                            .taotai{
                                position: absolute;
                                top: 7px;
                                right: 20px;
                                font-size: 18px;
                                background-color: #FF4E5A;
                                line-height: 20px;
                                border-radius: 10px;
                                padding: 0 4px;
                            }
                        }
                    }
                }
                .bottomBg{
                    position: absolute;
                    bottom: -8px;
                    width: 367px;
                    height: 21px;
                    background: url(../img/ceremony/leg3/border.png) top center no-repeat;

                }
            }
            .saikuang{
                .rule {
                    width: 670px;
                    height: 110px;
                    background: rgba(255, 255, 255, 0.5);
                    border-radius: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    text-align: center;
                    margin: 40px auto 0;
    
                    p {
                        width: 85%;
                        text-align: left;
                        font-size: 16px;
                        color: #6B6B6B;
                        line-height: 22px;
                        span {
                            color: #FF6969;
                        }
    
                    }
                }
    
                .rankBox_box {
                    width: 670px;
                    // height: 700px;
                    margin: 60px auto 0;
                    border-radius: 20px;
                    background: linear-gradient(0deg, #EFBF63, #FBEFC6);
                    display: flex;
                    align-items: center;
                    justify-content: center;
    
                    .rankBox {
                        width: 666px;
                        // height: 696px;
                        padding-bottom: 10px;
                        background: #f5f3ff;
                        border-radius: 20px;
    
                        .rankTab {
                            width: 90%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            position: relative;
                            margin: -28px auto 40px;
    
                            p {
                                width: 368px;
                                height: 22px;
                                background: url(../img/ceremony/leg2/border.png)top center no-repeat;
                                background-size: 100% 100%;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                            }
    
                            li {
                                width: 220px;
                                height: 56px;
                                background: url(../img/ceremony/leg2/tab2_a.png)top center no-repeat;
                                background-size: 100% 100%;
                                cursor: pointer;
                                user-select: none;
                                position: relative;
                                z-index: 2;
                                font-size: 22px;
                                text-align: center;
                                font-weight: 600;
                                color: #F5F4FD;
                                line-height: 56px;
    
                                &.active {
                                    background: url(../img/ceremony/leg2/tab2.png)top center no-repeat;
                                    background-size: 100% 100%;
                                }
                            }
                        }
                        .winRank{
                            position: relative;
                            width: 600px;
                            // height: 627px;
                            margin: 0 auto;
                            .taotaiInfo{
                                padding: 0 10px;
                                margin-bottom: 30px;
                                color: #4e5053;
                                background-color: #E2E9F3;
                                line-height: 40px;
                                border-radius: 20px;
                                .til{
                                    display: flex;
                                    justify-content: space-around;
                                    align-items: center;
                                    font-size: 14px;
                                    >div{
                                        width: 19%;
                                        text-align: center;
                                    }
                                }
                                .item{
                                    display: flex;
                                    justify-content: space-around;
                                    align-items: center;
                                    font-size: 16px;
                                    border-top: 1px solid #fff;
                                    .rankNum{
                                        color: #000;
                                    }
                                    >div{
                                        width: 19%;
                                        text-align: center;
                                    }
                                    .lostNum,.jinjiNum{
                                        height: 34px;
                                        text-align: center;
                                        border-radius: 6px;
                                        background-color: #A2BCE2;
                                    }
                                }
                            }
                            .list.list2{
                                position: relative;
                                width: 598px;
                                padding: 0 26px 20px;
                                margin-left: -26px;
                                margin-top: 40px;
                                border: 2px solid #C86DFF;
                                border-radius: 30px;
                                overflow: visible;
                                .goTop{
                                    right: 17px;
                                }
                                .groupTil{
                                    width: 150px;
                                    height: 36px;
                                    margin: -18px auto 0;
                                    border-radius: 18px;
                                    background-color: #C86DFF;
                                    text-align: center;
                                    line-height: 36px;
                                    font-weight: bold;
                                }
                                .grey{
                                    background: url(../img/ceremony/leg3/taotai.png)top left no-repeat;
                                    // background-size: 100% 100%;
                                }
                                .itemWrap{
                                    height: 450px;
                                    overflow-x: hidden;
                                    overflow-y: scroll;
                                }
                            }
                            .til{
                                display: flex;
                                justify-content: space-around;
                                font-size: 14px;
                                color: #6b6b6b;
                                text-align: center;
                                .rankNum{
                                    width: 20%;
                                }
                                .nick{
                                    width: 25%;
                                }
                                .uid{
                                    width: 20%;
                                }
                                .wins{
                                    width: 35%;
                                }
                            }
                            .list{
                                height: 500px;
                                padding-right: 10px;
                                overflow-x: hidden;
                                overflow-y: scroll;
                                .item{
                                    .itemWrap{
                                        display: flex;
                                        justify-content: space-around;
                                        height: 26px;
                                        margin-top: 22px;
                                        background-color: #E2E9F3;
                                        border-radius: 13px;
                                        line-height: 26px;
                                        font-size: 16px;
                                        color: #6b6b6b;
                                        text-align: center;
                                        .rankNum{
                                            width: 20%;
                                            color: #000;
                                        }
                                        .nick{
                                            width: 25%;
                                        }
                                        .uid{
                                            width: 20%;
                                        }
                                        .wins{
                                            width: 35%;
                                            background-color: #C86DFF;
                                            border-radius: 13px;
                                            color: #fff;
                                        }
                                        &.grey{
                                            background-color: #E0E0E0;
                                            .wins{
                                                background-color: #949494;
                                            }
                                        }
                                    }
                                    .devideLine{
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-around;
                                        width: 600px;
                                        margin-top: 22px;
                                        font-size: 18px;
                                        color: #686868;
                                        span{
                                            width: 200px;
                                            height: 1px;
                                            background-color: #E0E0E0;
                                            vertical-align: middle;
                                        }
                                    }
                                }
                            }
                        }
                        .saicheng{
                            .tab2 {
                                width: 660px;
                                height: 60px;
                                background: #E2E9F3;
                                border-radius: 20px;
                                margin: 40px auto 0;
                                overflow-x: scroll;
                                overflow-y: hidden;
                                .tabWrap{
                                    width: fit-content;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    // width: 1080px;
                                    height: 60px;
                                }
                                li {
                                    // flex-shrink: 0;
                                    width: 150px;
                                    height: 50px;
                                    background: url(../img/ceremony/leg2/tab1.png)top center no-repeat;
                                    background-size: 100% 100%;
                                    cursor: pointer;
                                    user-select: none;
                                    font-size: 20px;
                                    text-align: center;
                                    font-weight: 600;
                                    color: #F5F4FF;
                                    line-height: 50px;
                    
                                    &:nth-child(1) {
                                        background: url(../img/ceremony/leg2/tab.png)top center no-repeat;
                                        background-size: 100% 100%;
                                    }
                    
                                    &.active {
                                        background: url(../img/ceremony/leg2/tab1_a.png)top center no-repeat;
                                        background-size: 100% 100%;
                                        color: #FFFEB0;
                                    }
                    
                                    &:nth-child(1) {
                                        &.active {
                                            background: url(../img/ceremony/leg2/tab_a.png)top center no-repeat;
                                            background-size: 100% 100%;
                                            color: #FFFEB0;
                                        }
                                    }
                    
                                }
                            }
                            .pkConfig{
                                display: flex;
                                flex-wrap: wrap;
                                .item{
                                    position: relative;
                                    display: flex;
                                    width: 322px;
                                    height: 92px;
                                    margin: 40px 5px 0;
                                    background: url(../img/ceremony/leg3/bg-config.png)top center no-repeat;
                                    background-size: 100% 100%;
                                    .score{
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        width: 60px;
                                        margin: -12px 0 0 -30px;
                                        line-height: 24px;
                                        font-size: 20px;
                                        color: #000;
                                        border-radius: 12px;
                                        background-color: #fff;
                                        text-align: center;
                                    }
                                    
                                    .left,.right{
                                        position: relative;
                                        width: 50%;
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        .win{
                                            position: absolute;
                                            top: -5px;
                                            left: 0;
                                            width: 32px;
                                            height: 32px;
                                        }
                                        .txWrap{
                                            position: relative;
                                            margin-top: -24px;
                                            .headImg{
                                                width: 56px;
                                                height: 56px;
                                                background: #F1D8C4;
                                                border: 3px solid #FAF4FF;
                                                border-radius: 50%;
                                            }
                                            .online{
                                                width: 17px;
                                                height: 17px;
                                                position: absolute;
                                                top: 42px;
                                                left: 37px;
                                            }
                                        }
                                        .uname,.uid{
                                            font-size: 14px;
                                        }
                                        .dabiao{
                                            line-height: 14px;
                                            border-radius: 7px;
                                            background-color: #FF4351;
                                            font-size: 12px;
                                            color: #fff7c1;
                                            padding: 0 5px;
                                            &.grey{
                                                background-color: grey;
                                                color: #fff;
                                            }
                                        }
                                    }
                                    .right{
                                        .win{
                                            left: auto;
                                            right: 0;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .rankAward {
                .awardRule {
                    margin: 40px auto 0;
                    font-size: 14px;
                    text-align: center;
                    width: 100%;
                    color: #6B6B6B;
                }

                .awardImg {
                    width: 600px;
                    height: 134px;
                    background: url(../img/ceremony/leg2/award.png)top center no-repeat;
                    background-size: 100% 100%;
                    margin: 20px auto;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;

                    div {

                        &:first-child,
                        &:nth-child(3) {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;

                            p {
                                &:first-child {
                                    width: 88px;
                                    height: 88px;
                                    background: url(../img/list/user/giftBg.png)top center no-repeat;
                                    background-size: 100% 100%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    img {
                                        width: 60%;
                                        height: 60%;
                                    }
                                }

                                &:nth-child(2) {
                                    font-size: 14px;
                                    margin-top: 10px;
                                    color: #6C6C6C;

                                    span {
                                        color: #FF6969;
                                    }
                                }
                                &.pkWins{
                                    width: 107px;
                                    height: 107px;
                                    background: url(../img/ceremony/leg3/PK.png)top center no-repeat;
                                    background-size: 100% 100%; 
                                }
                            }
                        }

                        &:nth-child(2) {
                            width: 53px;
                            height: 78px;
                            background: url(../img/ceremony/leg2/awardTxt.png)top center no-repeat;
                            background-size: 100% 100%;
                            font-size: 14px;
                            text-align: center;
                            color: #0D0D0D;
                            line-height: 78px;
                            margin-left: -70px;
                        }
                    }
                }

                .awardInfo {
                    width: 600px;
                    height: 80px;
                    background: #E3E9F3;
                    border-radius: 12px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    margin: 0 auto 40px;

                    li {
                        margin: 0 auto;
                        width: 95%;
                        display: flex;
                        height: 35px;

                        p {
                            flex: 1;
                            text-align: center;
                            font-size: 16px;
                            color: #6B6B6B;
                            line-height: 35px;
                        }

                        &:first-child {
                            border-bottom: 1px solid #F5F3FF;

                            p {
                                font-size: 14px;
                            }
                        }
                    }
                }
            }

        }
    }

    .rankBox_box {
        width: 670px;
        padding: 2px 0;
        margin: 60px auto 0;
        border-radius: 20px;
        background: linear-gradient(0deg, #EFBF63, #FBEFC6);
        display: flex;
        align-items: center;
        justify-content: center;

        .rankBox {
            width: 666px;
            background: #f5f3ff;
            border-radius: 20px;
        }
    }

    .rankTab {
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        margin: -28px auto 0;

        p {
            width: 368px;
            height: 22px;
            background: url(../img/ceremony/leg2/border.png)top center no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        li {
            width: 220px;
            height: 56px;
            background: url(../img/ceremony/leg2/tab2_a.png)top center no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            user-select: none;
            position: relative;
            z-index: 2;
            font-size: 22px;
            text-align: center;
            font-weight: 600;
            color: #F5F4FD;
            line-height: 56px;

            &.active {
                background: url(../img/ceremony/leg2/tab2.png)top center no-repeat;
                background-size: 100% 100%;
            }
        }
    }

    .leg4 {
        width: 744px;
        padding-bottom: 50px;
        background: url(../img/list/user/userBg.png)top center no-repeat;
        background-size: 100% 100%;
        margin: 40px auto 0;
        overflow: hidden;

        .tab {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 530px;
            margin: 20px auto 0;
            background: url(../img/ceremony/leg4/icon.png)center center no-repeat;
            background-size: 40px 68px;

            li {
                width: 254px;
                height: 66px;
                background: url(../img/ceremony/leg4/tab.png)top center no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
                user-select: none;

                p {
                    font-size: 30px;
                    font-family: eryaxindahei;
                    font-weight: 800;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 66px;
                }

                &.active {
                    background: url(../img/ceremony/leg4/tab-a.png)top center no-repeat;
                    background-size: 100% 100%;
                }

                &:nth-child(2) {
                    transform: rotateY(180deg);

                    p {
                        transform: rotateY(-180deg);
                    }
                }
            }
        }

        .ruleIntro {
            width: 530px;
            padding: 0 70px;
            height: 110px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 20px;
            margin: 30px auto 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #6B6B6B;
            line-height: 28px;
        }

        .rankBox_box .rankBox {
            .riseRank {
                margin: 30px auto;

                .rankList {
                    width: 95%;
                    max-height: none;
                    margin: 0 auto;

                    li {
                        width: 305px;
                        height: 125px;
                        background: url(../img/ceremony/leg4/item.png)top center no-repeat;
                        background-size: 100% 100%;
                        margin: 0px 5px 5px;

                        .online {
                            top: 80px;
                            left: 95px;
                        }

                        p {
                            width: 135px;
                            margin-left: 10px;

                            span {
                                text-align: left;

                                &:nth-child(3) {
                                    width: 142px;
                                    padding: 0 4px;
                                    height: 26px;
                                    background: #B135AB;
                                    border-radius: 4px;
                                    line-height: 26px;
                                    margin-top: 3px;
                                }
                            }
                        }

                        &.loser {
                            background: url(../img/ceremony/leg4/item_n.png)top center no-repeat;
                            background-size: 100% 100%;

                            p {
                                span:nth-child(3) {
                                    background: #676767;
                                }
                            }

                            i {
                                background: linear-gradient(0deg, #EEEEEE, #F9F9F9);
                                color: #7B7B7B;
                            }
                        }
                    }
                }
            }
        }

        .pkRace {
            .raceListBox {
                display: flex;
                flex-wrap: wrap;
                margin: 20px auto;

                li {
                    width: 324px;
                    height: 134px;
                    background: url(../img/ceremony/leg4/pkItem.png)top center no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 20px 4px;

                    .infoBox {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        height: 156px;
                        margin-top: -30px;

                        .info {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            position: relative;
                            left: 10px;

                            &.info2 {
                                left: -13px;
                            }

                            .headImg {
                                width: 56px;
                                height: 56px;
                                background: #F7D3BE;
                                border: 2px solid #FFFFFF;
                                border-radius: 50%;
                            }

                            .online {
                                width: 17px;
                                height: 17px;
                                position: absolute;
                                top: 40px;
                                left: 50px;
                            }

                            .win {
                                position: absolute;
                                top: 20px;
                                left: -32px;
                                width: 33px;
                                height: 33px;
                                background: url(../img/ceremony/leg4/win.png);

                                &.win2 {
                                    left: 85px;
                                }
                            }

                            p {
                                width: 80px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                flex-direction: column;

                                span {
                                    width: 100%;
                                    font-size: 14px;
                                    color: #FFFFFF;
                                    line-height: 20px;
                                    text-align: center;
                                    flex-shrink: 0;

                                    &:first-child {
                                        font-weight: bold;
                                    }
                                }
                            }
                        }

                        .tickets {
                            width: 140px;
                            height: 20px;
                            background: rgba(0, 0, 0, 0.2);
                            border-radius: 10px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            position: relative;
                            left: 20px;

                            span {
                                color: #FFFFFF;
                                font-size: 16px;

                                &:first-child {
                                    font-size: 12px;
                                }
                            }

                            &.tickets2 {
                                left: -10px;
                            }
                        }

                        .isDone {
                            width: 88px;
                            height: 14px;
                            border: 1px solid #fff;
                            border-radius: 7px;
                            font-size: 12px;
                            text-align: center;
                            line-height: 14px;
                            background: #8E8E8E;
                            margin: 5px 0 0 40px;

                            &.active {
                                background: #FF5858;
                                color: #FFF7C1;
                            }

                            &.isDone2 {
                                margin: 5px 0 0 -10px;
                            }
                        }

                        .lastScore {
                            width: 132px;
                            height: 14px;
                            background: #7223D4;
                            border-radius: 7px;
                            border: 1px solid #fff;
                            font-size: 12px;
                            text-align: center;
                            line-height: 14px;
                            color: #FFFFFF;
                            margin: 5px 0 0 0px;
                            position: relative;
                            left: 20px;

                            &.active {
                                background: #4780E9;
                            }

                            &.lastScore2 {
                                left: -3px;
                            }
                        }
                    }

                    .pk {
                        width: 60px;
                        height: 24px;
                        background: #F5F3FF;
                        border-radius: 12px;
                        font-size: 20px;
                        text-align: center;
                        line-height: 24px;
                        font-weight: 600;
                        color: #000000;
                        flex-shrink: 0;
                        position: relative;
                        top: -20px;
                        left: -10px;
                    }

                    &.pkNoData {
                        width: 324px;
                        height: 115px;
                        background: url(../img/ceremony/leg4/noData.png)top center no-repeat;
                        background-size: 100% 100%;
                        margin: 50px auto;
                    }
                }
            }
        }

        .finalRank {
            .topThr {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                padding: 40px 0;
                justify-content: center;

                li {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    flex-shrink: 0;

                    .imgBox {
                        width: 119px;
                        height: 133px;
                        background: url(../img/ceremony/leg4/top2.png)top center no-repeat;
                        background-size: 100% 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;

                        .headImg {
                            width: 79px;
                            height: 79px;
                            border-radius: 50%;
                            margin: -40px 0 0px 1px;
                        }

                        .online {
                            width: 17px;
                            height: 17px;
                            position: absolute;
                            top: 8px;
                            right: 20px;
                        }

                        .rankNo {
                            width: 37px;
                            height: 29px;
                            background: url(../img/ceremony/leg4/rank3.png)top center no-repeat;
                            background-size: 100% 100%;
                            position: absolute;
                            bottom: 30px;
                            left: 38px;
                        }
                    }

                    .info {
                        display: flex;
                        align-items: center;

                        span {
                            width: 80px;
                            font-size: 16px;
                            color: #151515;

                            &:first-child {
                                font-size: 18px;
                                font-weight: bold;
                            }
                        }
                    }

                    .finalScore {
                        width: 170px;
                        height: 20px;
                        background: #E3E9F3;
                        border-radius: 10px;
                        display: flex;
                        align-items: center;
                        margin-top: 5px;

                        span {
                            flex-shrink: 0;

                            &:first-child {
                                width: 60px;
                                height: 20px;
                                background: #9A8CF8;
                                border-radius: 10px;
                                font-size: 14px;
                                text-align: center;
                                line-height: 20px;
                                color: #FFFFFF;
                            }

                            &:nth-child(2) {
                                flex: 1;
                                font-size: 16px;
                                text-align: center;
                                color: #151515;
                            }
                        }
                    }

                    &:first-child {
                        margin: 0 140px;

                        .imgBox {
                            width: 365px;
                            height: 154px;
                            background: url(../img/ceremony/leg4/top1.png)top center no-repeat;
                            background-size: 100%;

                            .headImg {
                                width: 91px;
                                height: 91px;
                                margin: -44px 0 0px -1px;
                            }

                            .rankNo {
                                bottom: 33px;
                                left: 164px;
                                background: url(../img/ceremony/leg4/rank1.png)top center no-repeat;
                                background-size: 100% 100%;
                            }

                            .online {
                                top: 12px;
                                right: 142px;
                            }
                        }
                    }

                    &:nth-child(2) {
                        .imgBox {
                            .rankNo {
                                background: url(../img/ceremony/leg4/rank2.png)top center no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                    }

                    &:nth-child(2),
                    &:nth-child(3) {
                        margin: 0px 50px;
                    }
                }
            }

            .topFour {
                width: 90%;
                margin: 0 auto 40px;

                li {
                    width: 580px;
                    height: 76px;
                    background: #E3E9F3;
                    border-radius: 20px;
                    display: flex;
                    align-items: center;
                    margin: 0 auto 10px;

                    div {
                        height: 80%;
                        flex: 1;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &:first-child {
                            font-size: 40px;
                            line-height: 60px;
                            font-weight: 600;
                            color: #A0A8B6;
                        }

                        &:nth-child(2) {
                            width: 240px;
                            flex: none;
                            border-left: 1px solid #fff;
                            border-right: 1px solid #fff;
                            position: relative;

                            .headImg {
                                width: 60px;
                                height: 60px;
                                border: 2px solid #FFFFFF;
                                border-radius: 50%;
                            }

                            .online {
                                width: 17px;
                                height: 17px;
                                position: absolute;
                                top: 44px;
                                left: 77px;
                            }

                            p {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;
                                margin-left: 10px;

                                span {
                                    width: 100px;
                                    text-align: left;
                                    font-size: 16px;
                                    color: #151515;
                                    line-height: 22px;

                                    &:first-child {
                                        font-size: 18px;
                                        font-weight: bold;
                                    }
                                }
                            }
                        }

                        &:nth-child(3) {
                            font-size: 20px;
                            color: #151515;
                        }
                    }

                    &:first-child {
                        height: 22px;
                        background: unset;

                        div {
                            font-size: 14px;
                            color: #6B6B6B;
                            line-height: 22px;
                            border: none;
                            font-weight: normal;
                        }
                    }
                }
            }
        }
    }
}